<!--
 * @LastEditors: Yang.Zzz
 * @LastEditTime: 2024-05-17 11:05:15
-->
<script setup>
import { reactive, ref , computed, watch } from "vue";
import { deepcopy  } from '../utils'; // 引入工具函数 
import { useStore } from 'vuex';

const activeTaskType = ref('collectionBox') 

const taskTypeList = reactive([{
    label: '收集箱',
    value: 'collectionBox',
}, {
    label: '今天',
    value: 'today',
    number: 6
}, {
    label: '最近7天',
    value: 'lastweek',
    number: 6
},{
    label: '摘要',
    value: 'digest',
},{
    label: '已完成',
    value: 'compelete',
},{
    label: '垃圾桶',
    value: 'rubbish'
}])



const taskTypeList_copy = deepcopy(taskTypeList)
const taskTypeList_time = reactive(taskTypeList_copy.slice(0,4)) 
const taskTypeList_variety = reactive(taskTypeList_copy.slice(4)) 
console.log("🚀 ~ taskTypeList_variety:", taskTypeList_variety,taskTypeList_time)

const handleChangetaskType = (item) => {
    const activeOption = taskTypeList.find(option => item.value ===  option.value)
    if(activeOption) {
        activeTaskType.value = item.value
    }
}

const store = useStore()
const taskList = computed(() => store.state.task.taskList);
const getItemNumber = (item) => {
    if(item.value === 'collectionBox') {
        const taskList_common = taskList.value.filter(option => option.status !== 'delete')
        return taskList_common.length
    }
}


</script>

<template>
    <div class="taskList-wrapper fboxRow h-full">
        <div class="taskList-inner h-full">
            <div class="taskList-project-view mt-6">
                <ul>
                    <li @click="handleChangetaskType(item)" v-for="item in taskTypeList_time" :key="item.value" class="project-list-view-item">
                        <div class="h-full">
                            <div class="project-list-view-item-button fboxRow h-full"  
                                :class="{'is-active': activeTaskType === item.value }">
                                <div class="item-button-icon fboxRow  mr-8">
                                    <el-icon :size="18"><Memo /></el-icon>
                                </div>
                                <div class="item-button-text">
                                    {{  item.label  }}
                                </div>
                                <div class="item-button-flag">
                                    <span class="item-button-flag--number font12">
                                        {{  getItemNumber(item)  }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="taskList-project-separate"></div>
            <div class="taskList-project-motto">
                <div class="project-motto-item">
                    <div class="item-title">
                       陶渊明 
                    </div>
                    <div class="item-content">
                        盛年不重来，一日难再晨。及时宜自勉，岁月不待人
                    </div>
                </div>
                <div class="project-motto-item">
                    <div class="item-title">
                       陈师道 
                    </div>
                    <div class="item-content">
                       落日无边江不尽， 此身此日更须忙
                    </div>
                </div>
                <div class="project-motto-item">
                    <div class="item-title">
                       朱熹 
                    </div>
                    <div class="item-content">
                       少年易学老难成，一寸光阴不可轻
                    </div>
                </div>
            </div>
            <div class="taskList-project-separate"></div>
            <div class="taskList-project-view">
                <ul>
                    <li @click="handleChangetaskType(item)" v-for="item in taskTypeList_variety" :key="item.value" class="project-list-view-item">
                        <div class="h-full">
                            <div class="project-list-view-item-button fboxRow h-full"  
                                :class="{'is-active': activeTaskType === item.value }">
                                <div class="item-button-icon fboxRow  mr-8">
                                    <el-icon :size="18"><Memo /></el-icon>
                                </div>
                                <div class="item-button-text">
                                    {{  item.label  }}
                                </div>
                                <div class="item-button-flag">
                                    <span v-if="item.number" class="item-button-flag--number font12">
                                        {{  item.number  }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .taskList-inner {
        padding-top: 8px;
        box-sizing: border-box;
    }

    .project-list-view-item {
        padding: 0 10px;
        height: 40px;
        box-sizing: border-box;
    }

    .project-list-view-item-button  {
        width: 272px;
        border-radius: 6px;
        padding-left: 14px;
        padding-right: 12px;
        display: flex;
        align-items: center;
        text-align: left;
        cursor: pointer;
    }

    .project-list-view-item-button.is-active {
        background: rgba(71,114,250,0.1);
    }

    .project-list-view-item-button:not(.is-active):hover {
        background: rgba(25,25,25,0.03);
    }

    .project-list-view-item-button .item-button-icon {
        align-items: center;
    }

    .project-list-view-item-button .item-button-text {
        flex: 1;
    }

    .project-list-view-item-button .item-button-flag {
        flex: none;
    }

    .project-list-view-item-button .item-button-flag .item-button-flag--number {
        color: rgba(25, 25, 25, 0.4);
    }

    .taskList-project-separate {
        margin: 16px 10px;
        height: 1px;
        background: rgba(25, 25, 25, 0.05);
    }

    .taskList-project-motto {
    }
    
    .project-motto-item {
        padding: 0 10px;
        margin-bottom: 18px;
    } 

    .project-motto-item .item-title {
        color: #1919194d;
        font-size: 12px;
        padding-left: 14px;
        height: 30px;
        line-height: 30px;
    } 

    .project-motto-item .item-content {
        padding: 8px 14px;
        color: #19191966;
        font-size: 12px;
        line-height: 16px;
        background: rgba(25,25,25,0.03);
    }
</style>
